Skip to main content

800. Styling

  • Different options to styling
    • Global styles
    • Component styles
    • SASS or SCSS
    • CSS-in-JS

Global Styles​

  • by default defined in styles->global.css
    • global styles must be imported in _app.js to work
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Component Level Styles​

  • styles that only apply to components and won't conflict with one another
  • usually named component.module.css.
.highlighted{
    border-bottom: 2px solid yellow;
}
import styles from '../styles/about.module.css';

function About() {
    return <h2 className={styles.highlighted}>About us page here</h2>
}

export default About;

CSS-in-JS​

  • inline styles
function About(){
	return <h2 style={{color: 'red'}}>Hello this is ... </h2>
}
export default About;